<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天气案例-深度监视</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body> 
		<!--
				深度监视
					Vue 中的 watch默认不监测对象内部值的改变(一层)
					配置 deep:true 可以监测对象内部值改变(多层)
				备注：
					Vue 自身可以监测对象内部值的改变，但Vue 提供的watch 默认不可以 
					使用 watch 时根据数据的具体结构，决定是否采用深度监视 
		-->
    <!-- 准备一个容器 -->
    <div id="root">
			<h1>今天天气很{{weather}}</h1> 
			<button @click="changeWeather">切换天气</button>
			<hr/>
			<h1>a 的值是： {{numbers.a}}</h1>
			<button @click="numbers.a++">点我让a加1</button>
			<h1> b值是： {{numbers.b}}</h1>
			<button @click="numbers.b++">点我让b加1</button>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示

    const vm = new Vue({
			el: '#root',
			data: {
				isHot: true,
				numbers:{
					a: 1,
					b: 1
				}
			},
			computed:{
				weather(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot;
				}
			},
			watch:{
				isHot:{
					// immediate:true, // 初始化时让 handler 调用一次
					// handler 当 isHot 发生变化的时候就调用一次
					handler(newValue, oldValue){
						console.log('isHot被修改了', newValue, oldValue)
					}
				},
				// 监视多级结构中的某个属性的变化
			/*	'numbers.a':{
					handler(){
						console.log('a被修改了')
					}
				}, */
				// 监视多级结构中的所有属性的变化
				numbers:{
					deep: true, // 开启深度监视
					handler(){
						console.log('numbers被修改了')
					}
				}
			}
    })
</script>
</html>
